<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>实现全选功能</title>
	<!--引用js文件夹下的vue.js,vue.js是vue的支持库-->
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
	  <div id="box01">
		  <!--
		    (1)如果现实多条数据，需要定义数组，并通过v-for进行循环系那是
			(2)当点击全选复选框时，控制所有选项状态（选中或不选中），
			实际上就是控制复选框状态（就是改变复选框的值）；
		  -->
		  <table border="1"> 
		     <tr>
				 <th>
					 <input type="checkbox" v-model="checkFlag" @click="checkAll"/>
				 </th>
				 <th>编号</th>
				 <th>姓名</th>
				 <th>成绩</th>
			 </tr>
			 <tr v-for="student in students">
				 <td>
					  <input type="checkbox" v-model="ids" :value="student.id"/>
				 </td>
				 <td>{{student.id}}</td>
				 <td>{{student.name}}</td>
				 <td>{{student.score}}</td>
			 </tr>
		  </table>
	  </div>
	</body>
	<script>
		//构建Vue，生成Vue对象vm（调度器），Vue()参数为json格式的数据（属性：值）；
		var vm=new Vue({
			//el参数用来绑定选择器，通过选择器找到对应的元素（标签||控件）
			el:"#box01",
			//声明data的参数用来项绑定的控件传值
			data:{
				//定义学生数组
				students:[
					{id:1001,name:"张三",score:60},
					{id:1002,name:"李四",score:75},
					{id:1003,name:"王二",score:60}
				],
				//定义ids数组用来存储被选择的学生编号
				ids:[],
				//定义用来表示全选复选框状态的参数
				checkFlag:false
			},
			methods:{
				checkAll(){
					/*
					*（1）通过this关键字找到ids数组,存储学生编号；
					*     分析：循环students数组，获取学生的编号，
					*     判断如果学生编号在ids中已经存在则不会重复添加到ids中，
					*     如果不存在则添加到ids中；
					*（2）默认全选被选中
					*/
				   //循环学生数组获取学生编号
					   
				   /* for(var a=0;a<this.students.length;a++){
					   this.students[a].id;
				   } */
				   //判断点击全选时的状态值，只要当点击全选时开始进行ids的添加
				   if(!this.checkFlag){
					   //ES6循环的新语法格式,小括号中的两个参数：item代表students对象，index带表数组下表
					   this.students.forEach((item,index) => {
					   		//判断ids中是否具备要存储的学生编号，如果不具备才添加
					   		if(!this.ids.includes(item.id)){
					   			this.ids.push(item.id); 
					   	   }
					   });
				   }else{
					   //将ids数组赋值空
					   this.ids=[];
				   }

				}
			}
		});
		
	</script>
</html>
